<template>
    <view class="main">
        <!-- 内容列表 -->
        <scroll-view scroll-y class="viewport">
            <!-- 购物车列表 -->
            <template v-if="userInfo">
                <!-- 优惠提示 -->
                <view class="tips">
                    <text class="label">满减</text>
                    <text class="desc">满1件, 即可享受9折优惠</text>
                </view>
                <view class="blank" v-if="carts.length === 0">
                    购物车还是空的，快来挑选好货吧
                </view>
                <!-- 购物车商品 -->
                <view class="carts">
                    <uni-swipe-action>
                        <uni-swipe-action-item class="swipe-cell" v-for="item in carts" :key="item.skuId">
                            <navigator hover-class="none" :url="'/pages/goods/index?id=' + item.id" class="card">
                                <text :class="[
                                    'checkbox',
                                    `icon-${item.selected ? 'checked' : 'ring'}`,
                                ]" @tap.stop="changeSelected(item.skuId, item.selected)"></text>
                                <!-- 商品缩略图 -->
                                <image class="thumb" :src="item.picture"></image>
                                <view class="meta">
                                    <!-- 商品名称 -->
                                    <view class="name ellipsis">{{ item.name }}</view>
                                    <!-- 商品类型 -->
                                    <view class="type ellipsis">{{ item.attrsText }}</view>
                                    <!-- 价格 -->
                                    <view class="price"> ¥{{ item.price }} </view>
                                    <!-- 商品数量，阻止冒泡 -->
                                    <view class="quantity" @tap.stop="() => { }">
                                        <text @tap="changeCount(item.skuId, -1, item.count, item.stock)"
                                            class="text">-</text>
                                        <input class="input" type="text" v-model="item.count" />
                                        <text @tap="changeCount(item.skuId, 1, item.count, item.stock)"
                                            class="text">+</text>
                                    </view>
                                </view>
                            </navigator>

                            <template v-slot:right>
                                <view class="swipe-cell-action">
                                    <button class="collect-button">移入收藏</button>
                                    <button @tap="deleteCart(item.skuId)" class="delete-button">
                                        删除
                                    </button>
                                </view>
                            </template>
                        </uni-swipe-action-item>
                    </uni-swipe-action>
                </view>
            </template>
            <!-- 状态提示 -->
            <view class="blank" v-else>
                <text>登后后可查看购物车中的商品</text>
                <navigator url="/pages/login/index" hover-class="none">
                    <button class="button">去登录</button>
                </navigator>
            </view>
        </scroll-view>

        <!-- 底部操作栏 -->
        <view class="toolbar" v-if="userInfo && carts.length !== 0">
            <text class="all" :class="{ checked: isSelectedAll }" @tap="changeSelectedAll">全选</text>
            <text class="text">合计:</text>
            <text class="amount">{{ selectedCartsPrice }}</text>
            <!-- 操作按钮 -->
            <view class="buttons">
                <view class="button payment" @click="goToOrderCreate" :class="{ disabled: selectedCartsCount === 0 }">
                    去结算({{ selectedCartsCount }})
                </view>
                <view class="button collect">移入收藏</view>
                <view class="button delete">删除</view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from "vuex"
import { getMemberCart, putMemberCart, putMemberCartSelected, deleteMemberCart } from "@/api/cart";
import { userInfo } from "os";
export default {
    computed: {
        ...mapState("user", ["userInfo"]),
        // 勾选了的购物车数组
        selectedCarts() {
            return this.carts.filter((v) => v.selected);
        },
        // 是否全选
        isSelectedAll() {
            /* 
            1 判断购物车数组的长度 和 勾选了的商品的数组的长度  
            如果相等 就全选 
            总购物车数组 6个元素
            勾选的了商品数组 [true]
            2 使用数字的every 
             */

            // 总的购物车数组长度 this.carts.length
            // 勾选了的商品的数组长度  this.carts.filter(v=>v.selected).length
            return this.carts.length === this.selectedCarts.length;
        },
        // 勾选的商品总价
        selectedCartsPrice() {
            let price = 0;
            this.selectedCarts.forEach((v) => (price += v.count * v.price));
            return price;
        },
        // 勾选的商品熟练
        selectedCartsCount() {
            let num = 0;
            this.selectedCarts.forEach((v) => (num += v.count));
            return num;
        },
    },
    data() {
        return {
            // 购物车数组
            carts: [],
        };
    },
    onShow() {
        if (this.userInfo) {
            this.loadData()
        }
    },
    methods: {
        async loadData() {
            const res = await getMemberCart()
            this.carts = res.result
        },
        // 商品的切换选中
        async changeSelected(id, selected) {
            /* 
            1 获取到想要修改的商品的id  skuId
            2 获取到商品修改后的状态 selected 
            3 调用函数 完成状态的修改  
            4 修改完毕，让页面的视图跟着发生变化 
              1 再次调用获取购物车列表的方法 
              2 自己来修改 this.carts 里面对应商品的选中状态 
             */
            selected = !selected;
            const res = await putMemberCart(id, { selected });
            this.loadData();
        },
        //商品数量的改变
        async changeCount(id, unit, count, stock) {
            /*
            1 获取到商品的id，减1还是加1
            2 对对应的商品的数量进行编辑 减1或者加1
              1 商品的购买数量不能 无条件的修改
                count 不能小于1
                count 不能大于库存stock
            3 调用函数  把修改后的数量传递后天接口 完成数量的编辑
            4 修改完毕，让页面的视图跟着发生变化   this.loadData();
             */
            count += unit;
            if (count < 1) {
                return uni.showToast({ title: "数量不能少于1", icon: "none" });
            } else if (count > stock) {
                return uni.showToast({
                    title: `数量不能超过库存 ${stock}`,
                    icon: "none",
                });
            }
            const res = await putMemberCart(id, { count });
            this.loadData();
        },
        //点击全选按钮
        async changeSelectedAll() {
            /*
            1 获取到全选按钮的 选中状态  然后 取反
            2 传达 选中状态到后端 来完成所有商品的 选中状态的修改
            3 更新数据
             */
            const selected = !this.isSelectedAll
            const res = await putMemberCartSelected({ selected })
            this.loadData()
        },
        //删除商品
        async deleteCart(id) {
            /* 
            1 弹出确认框 询问用户是否确定删除
            2 获取待删除的商品的 skuId
            3 调用函数 完成数据的删除
            4 更新页面
            */
            const [err, { confirm }] = await uni.showModal({
                title: "提示",
                content: "您确定删除嘛",
            })
            if (confirm) {
                //确定删除
                const res = await deleteMemberCart({ ids: [id] })
                this.loadData()
            }
        },
        //去结算
        goToOrderCreate() {
            /* 
            1 判断选中的商品的数量
            2 通过验证 再去页面跳转 订单创建页面
             */
            if (this.selectedCartsCount !== 0) {
                // 不等于 0  有选中的商品
                uni.navigateTo({ url: "/pages/order/create/index" });
            }
        },
    },
};
</script>

<style lang="scss">
page {
    background-color: #f7f7f8;
    height: 100%;
}

.main {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.viewport {
    min-height: 400rpx;
}

/* 顶部工具栏 */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    padding: 0 30rpx;
    font-size: 26rpx;
    color: #262626;
    background-color: #fff;

    .extra {
        display: flex;
        align-items: center;
        height: 24rpx;
        border-left: 1rpx solid #bfbfbf;

        .edit {
            padding: 0 30rpx;
        }

        .menu {
            width: 9rpx;
            height: 9rpx;
            padding: 14rpx;
            border-radius: 50%;
            background-color: #262626;
            background-clip: content-box;
            position: relative;

            &::before {
                left: 0;
            }

            &::after {
                right: 0;
            }
        }
    }
}

.topbar .extra .menu::before,
.topbar .extra .menu::after {
    position: absolute;
    top: 50%;
    content: "";
    width: 6rpx;
    height: 4rpx;
    background-color: #8c8c8c;
    transform: translateY(-50%);
    border-radius: 4rpx;
}

/* 优惠提示 */
.tips {
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 30rpx;
    font-size: 26rpx;
    color: #666;

    .label {
        color: #fff;
        padding: 7rpx 15rpx 5rpx;
        border-radius: 4rpx;
        font-size: 24rpx;
        background-color: #27ba9b;
        margin-right: 10rpx;
    }
}

.carts {
    padding: 0 20rpx;

    .card {
        display: flex;
        padding: 20rpx 20rpx 20rpx 80rpx;
        border-radius: 10rpx;
        background-color: #fff;
        position: relative;

        .checkbox {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80rpx;
            height: 100%;
            font-size: 40rpx;
            color: #444;
        }

        .icon-checked {
            color: #27ba9b;
        }

        .thumb {
            width: 170rpx;
            height: 170rpx;
        }

        .meta {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 20rpx;
        }

        .name {
            height: 72rpx;
            font-size: 26rpx;
            color: #444;
        }

        .type {
            line-height: 1.8;
            padding: 0 15rpx;
            font-size: 24rpx;
            align-self: flex-start;
            border-radius: 4rpx;
            color: #888;
            background-color: #f7f7f8;
        }

        .price {
            line-height: 1;
            font-size: 26rpx;
            color: #444;
            margin-bottom: 2rpx;
        }

        .warning {
            color: #cf4444;
            font-size: 24rpx;
        }

        .quantity {
            position: absolute;
            bottom: 20rpx;
            right: 5rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 220rpx;
            height: 48rpx;

            .text {
                height: 100%;
                padding: 0 20rpx;
                font-size: 32rpx;
                color: #444;
            }

            .input {
                height: 100%;
                text-align: center;
                border-radius: 4rpx;
                font-size: 24rpx;
                color: #444;
                background-color: #f6f6f6;
            }
        }
    }

    .swipe-cell {
        display: block;
        margin-top: 20rpx;

        &:first-child {
            margin-top: 0;
        }
    }
}

/* 购物车商品 */
/* 购物车状态提示 */
.blank {
    padding: 100rpx 0 60rpx;
    text-align: center;
    color: #444;
    font-size: 26rpx;

    .button {
        width: 240rpx !important;
        height: 60rpx;
        line-height: 60rpx;
        margin-top: 25rpx;
        font-size: 26rpx;
        border-radius: 60rpx;
        color: #fff;
        background-color: #27ba9b;

        &::after {
            display: none;
        }
    }
}

/* 吸底工具栏 */
.toolbar {
    position: relative;
    padding: 32rpx 20rpx 28rpx;
    border-top: 1rpx solid #ededed;
    border-bottom: 1rpx solid #ededed;
    background-color: #fff;

    .all {
        margin-left: 25rpx;
        font-size: 14px;
        color: #444;

        &::before {
            font-family: "erabbit" !important;
            content: "\e6cd";
            font-size: 36rpx;
            margin-right: 8rpx;
            vertical-align: -4rpx;
        }
    }

    .checked {
        &::before {
            content: "\e6cc";
            color: #27ba9b;
        }
    }

    .text {
        margin-right: 8rpx;
        margin-left: 32rpx;
        color: #444;
        font-size: 14px;
    }

    .amount {
        font-size: 20px;
        color: #cf4444;
        vertical-align: -1px;

        &::before {
            content: "￥";
            font-size: 12px;
        }

        .decimal {
            font-size: 12px;
        }
    }

    .buttons {
        position: absolute;
        right: 10rpx;
        top: 50%;
        display: flex;
        justify-content: space-between;
        text-align: center;
        line-height: 72rpx;
        font-size: 13px;
        color: #fff;
        transform: translateY(-50%);

        .button {
            width: 240rpx;
            margin: 0 10rpx;
            border-radius: 72rpx;
        }
    }

    .payment {
        background-color: #27ba9b;
    }

    .disabled {
        opacity: 0.6;
    }

    .delete {
        display: none;
        background-color: #27ba9b;
    }

    .collect {
        display: none;
        background-color: #ffa868;
    }
}

.swipe-cell-action {
    display: flex;
    height: 100%;

    button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        padding: 6px;
        line-height: 1.5;
        color: #fff;
        font-size: 26rpx;
        border-radius: 0;
    }

    .collect-button {
        background-color: #ffa868;
    }

    .delete-button {
        background-color: #cf4444;
    }
}
</style>
